<%@ page language="java" contentType="text/html; charset="UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<link rel="stylesheet" type="text/css" media="screen" href="..static/jqgrid/css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/jqgrid/css/trirand/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../static/bootstrap-4.1.1/bootstrap.min.css" />
<style>
html, body {
   margin: 0;
   padding: 0;
   font-size: 75%;
   height:'100%'
}
</style>
</head>
<body>
<div class="container fluid px-1">
 <!-- 导航 -->
  <nav>
		<ol class="breadcrumb mb-1">
		  <li class="breadcrumb-item">基础信息管理</li>
		  <li class="breadcrumb-item active">客户信息维护</li>
	    </ol>
  </nav>
  
  
  <!-- 查询form表单 -->
   <form id="form-cus-query" class="form-inline mb-2">
   
	   <div class="input-group mb-2">
		  <div class="input-group-prepend">
		    <label class="input-group-text">状态</label>
		  </div>
	    <select class="custom-select" name="cus_status">
		    <option value=''>全部</option>
		    <option value="00">未确定</option>
		    <option value="22">确定</option>
		    <option value="55">启用</option>
		    <option value="77">禁用</option>
	    </select>
	   </div>
   
   
   
   
      <div class="input-group mr-2">
      <div class="input-group-prepend">
		  <span class="input-group-text">编号</span>
	  </div>
		  <input type="text" class="form-control" name="cus_id">
      </div>
      
      
      <div class="input-group mr-2">
      <div class="input-group-prepend">
		  <span class="input-group-text">名称</span>
	  </div>
		  <input type="text" class="form-control" name="cus_name ">
      </div>
      
      <div class="input-group mr-2">
      <div class="input-group-prepend">
		  <span class="input-group-text">备注</span>
	  </div>
		  <input type="text" class="form-control" name="cus_remark">
      </div>
      
      <button id="bn-cus-query" type="button" class="btn btn-primary">查询</button>
  </form>


	<div id="pager"></div>
	<table id="grid"></table>
		

</div>

<script src="../static/jqgrid/js/jquery.min.js" type="text/javascript"></script>
<script src="../static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="../static/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="../static/js/popper-1.14.3.min.js" type="text/javascript"></script>
<script src="../static/bootstrap-4.1.1/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">

  $("#grid").jqGrid({
    datatype: 'json',
    url: 'customer',
    mtype: 'GET',
    colModel: [
       {name: 'cus_id', label : '客户编号'},
       {name: 'cus_name', label : '客户明称'},
       {name: 'cus_remark', label : '客户备注'},
       {name: 'cus_status', label : '客户状态'}
     ],
     pager:'#pager',
     rowNum:3,
     rowList:[2,3,5,10,15],
     
     autowidth:true,
     
     responsive:true
 });
  /*
  $("#grid").setGridHeight($(window).height()-60);
  $("#grid").setGridWidth($(window).Width()-2);
  $("#window").resize(function(){
	  $("#grid").setGridWidth($(window).Width()-60);
	  $("#grid").setGridWidth($(window).Width()-2);
  });
*/
  



   $('#bn-cus-query').click(function(){
	   
	   let arr=$('#form-cus-query').serializeArray(); 
	   let param={};
	   
	   for(let i=0;i<arr.length;i++){
		   params[arr[i].name]=arr[i].value;
	   }
	   
	   $("#grid").jqGrid('setGridParam',{
		   url:"cuetomer",
		   postData:params,//发送数据
		   pake:1
	   }).trigger("reloadGrid");
	
   });
 
</script>

</body>
</html>